<template>
  <view class="relative">
    <view
        id="container"
        v-if="isManagerOrAdmin"
        :style="{top:`${top}px`}"
        class="sticky"
    >
      <!--骨架屏-->
      <view class="flex justify-center align-center pt-50 pb-25 bg-fff" v-if="firstLoading">
        <view class="w-160 h-60 br-5 z-9 bg-f4f7f4"></view>
        <view class="w-30 h-5 m-lr-20 z-9"></view>
        <view class="w-160 h-60 br-5 fz-30 z-9 bg-f4f7f4"></view>
        <view class="w-30 h-5 m-lr-20 z-9"></view>
        <view class="w-160 h-60 br-5 fz-30 z-9 bg-f4f7f4"></view>
      </view>
      <view class="flex justify-center align-center pt-50 pb-25 bg-fff" v-else>
        <view
            :class="[active == 1 ? 'active' : 'disActive']"
            class="w-160 lh-60 text-center br-5 fz-30 z-9 border-box border-2D8CF0"
            @tap="activeChange(1)"
        >
          <text>当日</text>
        </view>
        <view class="w-30 h-5 bg-2D8CF0 m-lr-20 z-9"></view>
        <view
            :class="[active == 2 ? 'active' : 'disActive']"
            class="w-160 lh-60 text-center br-5 fz-30 z-9 border-box border-2D8CF0"
            @tap="activeChange(2)"
        >
          <text>近三日</text>
        </view>
        <view class="w-30 h-5 bg-2D8CF0 m-lr-20 z-9"></view>
        <view
            :class="[active == 3 ? 'active' : 'disActive']"
            class="w-160 lh-60 text-center br-5 fz-30 z-9 border-box border-2D8CF0"
            @tap="activeChange(3)"
        >
          <text>全部</text>
        </view>
      </view>

    </view>
    <!--骨架屏-->
    <list-skeleton v-if="firstLoading">
      <slot>
        <view class="w-350 h-45 mt-10 bg-f4f7f4"></view>
      </slot>
    </list-skeleton>
    <view :style="{minHeight:`calc(100vh - ${top}px - ${safeAreaInsets}px - 338rpx)`}">
      <view v-if="maintenanceList.length && !firstLoading">
        <view
            class="m-lr-20 mb-30 pl-20 p-tb-12 flex align-center justify-between bg-E9F8FF br-10"
            v-for="item in maintenanceList"
            :key="item.workOrderId"
            @tap.stop="clickItem(item)"
            @longpress="handleLongpress"
        >
          <view class="flex w-full justify-between">
            <view class="flex flex1 flex-column oh">
              <text class="fz-40 font-bold lh-56 mt-12 text-ellipsis">{{ item.workOrderName || '-'}}</text>
              <view class="flex mt-20">
                <text class="fz-32 lh-45">
                  起止时间：
                </text>
                <view class="flex flex-column fz-32 lh-45">
                  <text>{{ timeFormat(item.workOrderStartDate, item.workOrderStartTime)}}</text>
                  <text class="mt-10">{{ timeFormat(item.workOrderEndDate, item.workOrderEndTime)}}</text>
                </view>
              </view>
            </view>
            <view
                class="w-50 flex align-center align-center mr-50"
                v-if="isLongpress"
                @tap.stop=""
            >
              <u-checkbox
                  size="50"
                  v-model="item.checked"
              ></u-checkbox>
            </view>
          </view>
        </view>
      </view>
      <empty-icon v-if="!maintenanceList.length && !loading"></empty-icon>
    </view>
    <view class="flex align-center justify-end h-100 sticky bottom-100 bg-fff" v-if="isLongpress" :style="{bottom : `calc(100rpx + ${safeAreaInsets}px)`}">
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center mr-50" @tap="cancle">
        <text>取消</text>
      </view>
      <view
          class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50"
          @tap="distribution"
          :class="[isAllowDistribution ? '' : 'notAllow' ]"
      >
        <text>分配</text>
      </view>
    </view>
  </view>
</template>

<script>
import { assignedList } from "@/api/maintenance/task";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import dayjs from '@/libs/dayjs.min.js'
import ListSkeleton from "../../components/ListSkeleton";

export default {
  name: "maintenanceUnassigned",
  components: {ListSkeleton, EmptyIcon},
  mixins:[getNavBarHeight],
  props:['isManagerOrAdmin'],
  data() {
    return {
      hasNext: false,
      pageNum: 1,
      pageSize: 10,
      endDate: '',
      startDate: '',
      active: 1, //1, 当日 2 近三日激活 3 全部激活
      maintenanceList: [],//工单列表
      isLongpress: false,//是否长按多选
      isAllowDistribution: false,//是否允许点击分配
      batchInfo: {},
      loading: true,
      firstLoading: true,
      safeAreaInsets: 0, //底部安全区高度
    }
  },
  created(){
    uni.getSystemInfo({
      success: (res) => {
        // #ifdef MP-WEIXIN
        this.safeAreaInsets = res.screenHeight - res.safeArea.bottom
        // #endif
        // #ifndef MP-WEIXIN
        this.safeAreaInsets = res.safeAreaInsets.bottom
        // #endif
      }
    })
    //默认展示当日
    this.startDate = dayjs().format('YYYY-MM-DD')
    this.endDate = dayjs().format('YYYY-MM-DD')
    this.doQuery().then(res => {
      this.hasNext = res.hasNext
      this.maintenanceList = res.rows.map(item => {
        return {...item, checked: false}
      })
    }).finally(() => {
      this.loading = false
      this.firstLoading = false
    })
  },
  watch:{
    maintenanceList:{
      handler(newValue){
        const hospitalIdArray = newValue.reduce((pre, next) => {
          if(next.checked){
            pre.push(next.hospitalId)
          }
          return pre
        }, [])
        //判断是否为同一个医院
        this.isAllowDistribution = Array.from(new Set(hospitalIdArray)).length == 1
        if(this.isAllowDistribution){
          this.batchInfo.hospitalId = hospitalIdArray[0]
          this.batchInfo.workOrderIdList = newValue.reduce((pre, next) => {
            if(next.checked){
              pre.push(next.workOrderId)
            }
            return pre
          }, [])
        }
      },
      immediate: true,
      deep: true,
    }
  },
  methods:{
    distribution(){
      //没选中工单时点击分配按钮不做任何事情
      if(this.isAllowDistribution){
        this.loading = true
        this.$tab.navigateTo('/pages/maintenance/choose-worker?workOrderIdList=' + this.batchInfo.workOrderIdList + '&hospitalId=' + this.batchInfo.hospitalId + '&byBatch=1')
      }
    },
    cancle(){
      this.maintenanceList.forEach(item => {
        item.checked = false
      })
      this.isLongpress = false
    },
    handleLongpress(){
      //长按手机震动并且显示复选框
      uni.vibrateShort({
        success: function() {

        }
      });
      this.isLongpress = true
    },
    show(){
      this.pageNum = 1
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.maintenanceList = res.rows.map(item => {
          return {...item, checked: false}
        })
      }).finally(() => {
        this.loading = false
        this.firstLoading = false
      })
      this.isLongpress = false
    },
    hide(){
      this.firstLoading = true
    },
    activeChange(activeType){
      //切换tag重置页数
      this.pageNum = 1
      this.maintenanceList = []
      if(activeType == 1){
        this.startDate = dayjs().format('YYYY-MM-DD')
        this.endDate = dayjs().format('YYYY-MM-DD')
      }else if(activeType == 2){
        this.startDate = dayjs().format('YYYY-MM-DD')
        this.endDate = dayjs().add(2, 'day').format('YYYY-MM-DD')
      }else{
        this.endDate = ''
        this.startDate = ''
      }
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.maintenanceList = res.rows.map(item => {
          return {...item, checked: false}
        })
      }).finally(() => {
        this.loading = false
      })
      this.active = activeType
    },
    reachBottom(){
      if(this.hasNext){
        this.pageNum ++
        this.doQuery().then(res => {
          this.hasNext = res.hasNext
          this.maintenanceList= [...this.maintenanceList,...res.rows.map(item => {
            return {...item, checked: false}
          })]
        }).finally(() => {
          this.loading = false
        })
      }
    },
    doQuery(){
      this.loading = true
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: 0,
        workOrderStartDate: this.startDate,
        workOrderEndDate: this.endDate
      }
      return assignedList(params).then(res => {
        return Promise.resolve(res)
      }).catch(() => {
        this.loading = false
        this.firstLoading = false
      })
    },
    clickItem(item) {
      if(!this.isLongpress){
        this.loading = true
        this.$tab.navigateTo('/pages/maintenance/choose-worker?workOrderId=' + item.workOrderId + '&hospitalId=' + item.hospitalId + '&byBatch=0')
      }
      else{
        item.checked = !item.checked
      }
    },
    timeFormat(date, time){
      if(!date || !time){
        return '-'
      }
      return date + ' ' + time.split(':')[0] + ":" + time.split(':')[1]
    },
  }
}
</script>

<style lang="scss" scoped>
.active {
  background-color: #2d8cf0;
  color: #fff;
}
.disActive {
  color: #2d8cf0;
  background-color: #fff;
}
.bottom-100{
  bottom: 100rpx;
}

.notAllow{
  background-color: #a0cfff;
  border: 2rpx solid #a0cfff;
}
</style>
